// 封装函数调用的方式渲染组件
import { createVNode, render } from 'vue'
import MessageComponent from './index.vue'
function Message ({ type, text }) {
  // 组件渲染逻辑
  // 1. createVNode   2. render
  // 1. 使用组件引用生成一个虚拟 dom 节点
  const VNode = createVNode(MessageComponent, { type, text })
  // 2. 手动创建一个挂载节点 container
  const container = document.createElement('div')
  document.body.appendChild(container)
  // 3. 完成真是渲染
  render(VNode, container)
  // 4. 1.5s 之后自动消失
  setTimeout(() => {
    render(null, container)
  }, 1500)
}

export default Message
